import React,{Component} from 'react'
import Pages from '../Pages'
import {Link} from 'react-router'
import * as pub from '../../config/public';
import * as fetch from '../../config/fetch';
import {Spin,message} from 'antd'
class RankCard extends Component {
	constructor(args) {
		super();
		this.state = {
			CardList : []
		}
	}
	componentWillMount() {
	}
	operate(id,type){
		fetch.operateCourse(id,type).then((data)=>{
			if(data.result === 'RC100'){
				this.props.show();
				message.success(data.msg, 3);
			}else {
				message.error(data.errMsg, 3);
			}
		}, (res) => {
			pub.reject(res);
		})
	}
	render(){
		console.log(this.props.courseTopList);
		return(
			<ul className="clearFix courseRank">
			{this.props.courseTopList.map((course,index)=>{
				return(
						<li key={index}>
							<Link to={"/CourseDetail/" + course.courseId}>
							<img className='course-rank-img' alt='test' src={require("../../style/images/test.png")} />
							<div className="play"><i className="icon-play"></i></div>
								{/*<video src={pub.getFile(course.coursevideoPath)}
												               	  	>
												        	    	 您的浏览器不支持 video 标签。
												                  	</video>	*/}	
							</Link>
							<div>
							<h2>{course.courseName}</h2>
								<p className="time">{pub.formatTimestamp(course.createTime)}</p>
								<Link to={"/CourseDetail/" + course.courseId} className="cont shorthand">{course.courseDesc === null ? '没有描述' : pub.subString(course.courseDesc,100) }</Link>
								<p className="collect-like">
								  <font style={{opacity:course.userCourseOperation.isCollection === 1 ? 1:0.4}} onClick={()=>this.operate(course.courseId,2)}><i className="icon-heart"></i>{course.sumCollection}</font>
								  <font style={{opacity:course.userCourseOperation.isLike === 1 ? 1:0.4}} onClick={()=>this.operate(course.courseId,3)}><i className="icon-thumbs-up"></i>{course.sumLike}</font></p>
							</div>
							<Link className='course-rank-head' to={'/TeacherDetail/'+ course.userName}>
							{
								course.headPath !== ''?
								<img src={pub.getFile(course.headPath)} alt='封面图片' onError={(e) => pub.headImageError(e)} style={{float:'right'}}/>
								:
								<img alt='test' src={require('../../style/images/portrait.png')} onError={(e) => pub.headImageError(e)} style={{float:'right'}}/>
							}
							</Link>
							{course.goodCourse === '1' ? <div className='index-PHjing' ></div> : null}
						</li>
				)
			})}
			</ul>
			)
	}
}
class CourseRank extends Component {
	constructor(args) {
		super();
		this.state = {
			tab : 1,
			courseTopList:[],
			loading:false,
			jumpPage: 1,
			totalPage: 1
		}
	}
	changeTab(tab) {
		this.setState({
			tab: tab,
			jumpPage:1
		},()=>{
			this.show();
		})
	}
	componentWillMount() {
		this.show();
	}
	show() {
		
		let topType;
		switch (this.state.tab) {
			case 0:
				topType = 'day';
				break;
			case 1:
				topType = 'week';
				break;
			case 2:
				topType = 'month';
				break;
			default:
				break;
		}
		pub.loading(this,true);
		let pageno = this.state.jumpPage
		fetch.rankCourse(topType,pageno).then((data) => {
			if(data.result ==='RC100'){
				this.setState({
					courseTopList: data.courseTopList,
					totalPage:data.total
				},()=>{
					pub.loading(this,false);
				})
			}else{
				message.error(data.errMsg, 3);
				pub.loading(this, false);
			}
			
		}, (res) => {
			pub.loading(this, false);
			pub.reject(res);
		})
	}
	jump(page) {
		this.setState({
			jumpPage: page
		}, () => {
			this.show();
		})
	}
	render(){
		return(
		<div className="wrapper bg-F0F4F6">
			<div className="layout clearFix pad-t-20">
				<div className="filter clearFix">
				    <div className="title">集赞榜Top100</div>
					<ul className="filter-ul nav">
					    <li className={this.state.tab===0?"active":""} onClick={()=>this.changeTab(0)}><a>日榜</a></li>
						<li className={this.state.tab===1?"active":""} onClick={()=>this.changeTab(1)}><a>周榜</a></li>
						<li className={this.state.tab===2?"active":""} onClick={()=>this.changeTab(2)}><a>月榜</a></li>
					</ul>
				</div>
				<Spin spinning={this.state.loading} tip="加载列表中...">
				<div className="rank-box-1" style={{minHeight:'559px'}}>
				   <RankCard show={this.show.bind(this)} courseTopList={this.state.courseTopList}/>
				</div>
				</Spin>
				<div className="line"></div>
				<Pages totalPage={this.state.totalPage} changePage={this.state.jumpPage} jump={this.jump.bind(this)}/>
			</div>
	    </div>
			)
	}
}
export default CourseRank;